<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline" label-width="70px">
      <el-form-item>
        <el-upload
          class="upload-demo"
          action="http://127.0.0.1:8002/fileUpload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :on-success="uploadSuccess"
          :on-progress="uploadProgress"
          :on-error="uploadError"
        >
          <el-button
            size="small"
            icon="el-icon-upload2"
            type="primary"
            v-loading.fullscreen.lock="fullscreenLoading"
            >导入excle</el-button
          >
        </el-upload>
      </el-form-item>
      <el-form-item
        ><el-button
          v-on:click="downExcle"
          size="small"
          icon="el-icon-upload2"
          type="primary"
          >导出excle</el-button
        ></el-form-item
      >
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="code" label="编码"> </el-table-column>
      <el-table-column prop="province" label="城市" width="180">
      </el-table-column>
      <el-table-column prop="temp" label="气温" width="180"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { fileUpload, get, fileDown } from "@/api/api";
export default {
  data() {
    return {
      tableData: [],
      fileList: [],
      fullscreenLoading: false,
      multipleSelection: [],
    };
  },
  created() {},
  methods: {
    //上传中
    uploadProgress(event, file, fileList) {
      this.fullscreenLoading = true;
    },
    //上传成功
    uploadSuccess(response, file, fileList) {
      this.fullscreenLoading = false;
      this.tableData = response.data;
      console.log(response.data);
    },
    //上传失败
    uploadError(err, file, fileList){
      this.fullscreenLoading = false;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //下载数据
    downExcle() {
      if (this.tableData.length == 0) {
        this.$message.warning(`请先导入文件`);
        return;
      }
      let data = {};
      data.data = this.tableData;
      fileDown(data)
        .then((res) => {
          console.log(res.data);
          window.open(res.data);
        })
        .catch((_) => {
          console.log(_);
          this.msgError("获取数据失败");
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
